import React, {Component} from 'react';
import styled from 'styled-components';
import Task from './task';
import Task1 from './task1';
import {Droppable} from 'react-beautiful-dnd';

const Container = styled.div`
  margin: 8px;
  border: 1px solid lightgrey;
  border-radius: 2px;
  width: 220px;

  display: flex;
  flex-direction: column;
`;
const Title = styled.h3`
  padding: 8px;
`;
const TaskList = styled.div`
  padding: 8px;
  transition: background-color 0.2s ease;
  background-color: ${props =>
          props.isDraggingOver ? 'skyblue' : 'white'}
  flex-grow: 1;
  min-height: 100px;
`;

export default class Column extends Component {
  renderClone = (a, b, c) => {
    console.log(a);
    console.log(b);
    console.log(c);
    const task = this.props.tasks[c.source.index];
    return (
      132132
    );
  };

  render() {
    return (
      <Container>
        <Title>{this.props.column.title}</Title>
        <Droppable isDropDisabled={this.props.isDropDisabled}
                   droppableId={this.props.column.id}
                   ignoreContainerClipping={true}>
          {(provided, snapshot) => {
            return <TaskList
              ref={provided.innerRef}
              {...provided.droppableProps}
              isDraggingOver={snapshot.isDraggingOver}
            >

              {this.props.tasks.map((task, index) => {
                console.log(this.props.isDropDisabled, 2222222222);
                if (this.props.isDropDisabled) {
                  return <Task1 key={index} columns_id={this.props.column.id} task={task} index={index}/>;
                }
                return (

                  <Task key={index} columns_id={this.props.column.id} task={task} index={index}/>
                );
              })}
              {provided.placeholder}
            </TaskList>;
          }}
        </Droppable>
      </Container>
    );
  }

}
